<template>
	<div class="CheckoutHouse">
		<div class="CheckoutHouse-stabox">
			退房相关金额将于申请之日后第二个工作日 内原路退还到您支付账户中
		</div>
		<div class="CheckoutHouse-huosebox">
			<div class="th-title">
				<p>您于{{RefundInfodata.createTime}}完成了退房</p>
			</div>
			<div class="order-main">
				<div class="om-imgbox">
					<!--<img class="om-img" v-if="orderinfodata.houseImgUrl.indexOf('?')==-1" :src="orderinfodata.houseImgUrl+'?imageslim'" />-->
					<img class="om-img" :src="RefundInfodata.houseImgUrl" />
				</div>
				<div class="om-right">
					<p>{{RefundInfodata.title}}</p>
					<p>入住时间：{{RefundInfodata.houseStartTime}}</p>
					<p>退房时间：{{RefundInfodata.houseEndTime}}</p>
				</div>
			</div>

			<div class="th-landhousebox">
				<div class="thl-item">
					<div class="tti-left">订 单 号</div>
					<div class="tti-right"><img class="ttir-icon" src="../assets/img/images/oinfoo.png" /><span>{{RefundInfodata.orderNo}}</span></div>

				</div>
				<div class="thl-item">
					<div class="tti-left">预订人</div>
					<div class="tti-right">
						{{RefundInfodata.contactName}}
					</div>
				</div>
				<div class="thl-item">
					<div class="tti-left">联系方式</div>
					<div class="tti-right">
						
						{{RefundInfodata.contactPhone}}
					</div>
				</div>
			</div>
		</div>

		<!--入住人信息-->
		<div class="CheckoutHouse-Checkinfobox">
			<div class="tt-title">
				入住人信息
			</div>
			<div class="tc-item" v-for="item,key in RefundInfodata.userCheckInList" :key="key">

				<div class="tci-left"><img class="oinfouser" src="../assets/img/images/oinfouser_03.png" /></div>
				<div class="tci-right">
					<div class="tcir-name"><span class="tcirn">{{item.checkInName}}</span><span>{{item.checkInPhone}}</span></div>
					<div class="tcir-num">{{item.checkInIdCards}}</div>
				</div>
			</div>
		</div>
		<!--预定人信息-->
		<div class="CheckoutHouse-Reserveinfobox">
			<div class="tt-title">
				退房情况
			</div>
			<div class="tr-item">
				<div class="tri-left">申请时间</div>
				<div class="tri-right">{{RefundInfodata.createTime}}</div>
			</div>
			<div class="tr-item">
				<div class="tri-left">退房时间</div>
				<div class="tri-right">{{RefundInfodata.refundTime}}</div>
			</div>
			<div class="tr-item">
				<div class="tri-left">退房原因</div>
				<div class="tri-right">{{RefundInfodata.content}}</div>
			</div>
			<div class="tr-item">
				<div class="tri-left">可退租金</div>
				<div class="tri-right">{{RefundInfodata.refundPrices}}</div>
			</div>
			<div class="tr-item">
				<div class="tri-left">可退押金</div>
				<div class="tri-right">{{RefundInfodata.cashPledge}}</div>
			</div>
		</div>
		<!--退订规则-->
		<div class="CheckoutHouse-Reserveinfobox"  @click="ShortRulesGO()">
			<div class="tr-item">
				<div class="tri-left">退订规则</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import OrderOpera from '../assets/libs/OrderOpera.js';
	export default {
		name: "CheckoutHouse",
		data() {
			var that = this;
			return {
				orderId: that.$route.query.orderId,
				refundId: that.$route.query.refundId,
				houseId:this.$route.query.houseId,
				mySessionUserinfo:JSON.parse(sessionStorage.getItem("userinfo")),
				jshouseStartTime: [],
				jshouseEndTime: [],
				ordermsg: "",
				orderower: '你是否要取消订单申请，取消后如果所选日期被出租，将无法再次预定，确认是否取消',
				orderclose: "订单删除后将无法恢复，确认是否删除？",
			}
		},
		mounted() {
			var that = this;
			that.RefundInfofun();
			
			if(that.mySessionUserinfo.length != 0) {
			
			} else {
				that.$router.push({
					path: "/login"
				})
			}
		},

		computed: {
			...mapGetters([
				'orderinfodata',
				'RefundInfodata',
				'source',
				
			])
		},
		methods: {
			...mapActions({
				setToderInfo: 'setToderInfo',
				setAlipayInfo: 'setAlipayInfo',
				setRefundInfo:"setRefundInfo"
			}),
			
			ShortRulesGO() {
				var that = this;
				that.$router.push({
					path: "/ShortRules",
					query: {
						houseId: this.houseId
					}
				})
			},
			//			详情路由跳转
			detailsrouter(houseId) {
				var that = this;

				that.$router.push({
					path: '/shortDetails',
					query: {
						houseId: houseId
					}
				})
			},
			RefundInfofun() {
				let ajaxSign = {
					source: this.source, // string 是
					refundId: this.refundId, // string 是 退房id
					userId: this.mySessionUserinfo.id, // string 是
					token: this.mySessionUserinfo.token, // string 是
				}
				let ajaxData = api.getAES(ajaxSign);
				api.GetRefundInfo(ajaxData)
					.then(res => {
						this.setRefundInfo(res.result)
					})
			}
		}
	}
</script>

<style>
	.CheckoutHouse {
		width: 100%;
		color: #282828;
		background: #f5f5f5;
	}
	
	.CheckoutHouse-stabox {
		width: 100%;
		padding: .3rem .24rem;
		box-sizing: border-box;
		line-height: .56rem;
		background: #77afc9;
		color: #fff;
		font-size: .33rem;
	}
	
	.ts-imgbox {
		width: 1.125rem;
		text-align: center;
	}
	
	.ts-img {
		display: block;
		width: .58rem;
		height: .53rem;
		margin: auto;
	}
	
	.tsr-sta {
		font-size: .35rem;
		line-height: .35rem;
		color: #e25051;
	}
	
	.tsr-bottom {
		font-size: .26rem;
		line-height: .26rem;
		margin-top: .26rem;
	}
	
	.CheckoutHouse-huosebox {
		width: 100%;
		background: #fff;
		margin-top: .21rem;
	}
	
	.th-title {
		font-size: .33rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .31rem .24rem;
		box-sizing: border-box;
		border-bottom: 1px solid #eeecec;
	}
	
	.th-title>p {
		line-height: .33rem;
		width: 5.9rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}
	
	.th-title-more {
		display: block;
		display: block;
		width: .28rem;
		height: .28rem;
		border: 1px solid #a4a4a4;
		border-bottom: none;
		border-left: none;
		transform: rotate(45deg);
	}
	
	.order-main {
		display: flex;
		padding: .44rem 0;
		box-sizing: border-box;
		border-bottom: 1px solid #eeecec;
		padding: .44rem .33rem;
		box-sizing: border-box;
	}
	
	.om-imgbox {
		width: 2.15rem;
		height: 1.42rem;
		overflow: hidden;
	}
	
	.om-img {
		display: block;
		max-width: 100%;
		min-height: 100%;
	}
	
	.om-right {
		width: 4.27rem;
		margin-left: .42rem;
		line-height: .28rem;
		position: relative;
		font-size: .26rem;
	}
	
	.om-right>p {
		width: 100%;
		margin-bottom: .3rem;
	}
	
	.om-right>p:last-child {
		margin-bottom: 0;
	}
	
	.th-landhousebox {
		width: 100%;
	}
	
	.thl-item {
		padding: .49rem .24rem;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eeecec;
	}
	
	.thli-left {
		font-size: .31rem;
		line-height: .31rem;
		display: flex;
	}
	
	.thli-left span {}
	
	.thli-label {
		width: 1.35rem;
		display: flex;
		justify-content: space-between;
		color: #747474;
		line-height: .42rem;
	}
	
	.thli-con {
		width: 4.1rem;
		padding-left: .2rem;
		box-sizing: border-box;
		line-height: .42rem;
	}
	
	.thli-icon {
		width: .42rem;
		height: .38rem;
	}
	
	.thli-icon>img {
		display: block;
		max-width: 100%;
		min-height: 100%;
	}
	/*交易信息*/
	
	.CheckoutHouse-Traninfobox {
		width: 100%;
	}
	
	.tt-title {
		color: #a5a5a5;
		font-size: .33rem;
		line-height: .33rem;
		background: #F5F5F5;
		text-align: center;
		padding: .33rem 0;
		box-sizing: border-box;
	}
	
	.tt-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #EEECEC;
		padding: .45rem .24rem;
		box-sizing: border-box;
		background: #fff;
	}
	
	.tti-left {
		width: 1.3rem;
		font-size: .32rem;
		color: #747474;
		display: flex;
		justify-content: space-between;
	}
	
	.tti-right {
		font-size: .31rem;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	
	.ttir-icon {
		width: .33rem;
		height: .36rem;
		margin-right: .1rem;
	}
	
	.ttir-money {
		color: #e25051;
		display: block;
	}
	
	.ttir-more {
		display: block;
		width: .23rem;
		height: .23rem;
		border: 1px solid #bcbcbc;
		border-bottom: none;
		border-left: none;
		transform: rotate(45deg);
	}
	/*入住人信息*/
	
	.CheckoutHouse-Checkinfobox {
		width: 100%;
	}
	
	.tc-item {
		background: #fff;
		display: flex;
		font-size: .32rem;
		line-height: .32rem;
		padding: .34rem .24rem;
		border-bottom: 1px solid #EEECEC;
		box-sizing: border-box;
	}
	
	.tci-right {
		margin-left: .34rem;
	}
	
	.oinfouser {
		display: block;
		width: .82rem;
		height: .82rem;
		border-radius: 50%;
	}
	
	.tcir-num {
		margin-top: .33rem;
	}
	
	.tcirn {
		margin-right: .55rem;
	}
	/*预定人信息*/
	
	.tr-item {
		display: flex;
		background: #fff;
		justify-content: space-between;
		padding: .47rem .24rem;
		border-bottom: 1px solid #EEECEC;
		box-sizing: border-box;
		font-size: .32rem;
		line-height: .32rem;
	}
	
	.tri-left {
		width: 1.3rem;
		display: flex;
		justify-content: space-between;
	}
	
	.CheckoutHouse-colsebtnbox {
		width: 100%;
		height: 1.01rem;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #e25051;
		color: #fff;
		font-size: .35rem;
	}
	
	.tcb-img {
		display: block;
		width: .31rem;
		height: .35rem;
		margin-right: .14rem;
	}
	
	.CheckoutHouse .order-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		font-size: .35rem;
		width: 100%;
		height: .94rem;
		color: #7a7a7a;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: .01rem solid #EEECEC;
	}
	
	.CheckoutHouse .ob-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		line-height: .28rem;
	}
	
	.CheckoutHouse .ob-boxicon {
		width: .35rem;
		height: .35rem;
		margin-right: .17rem;
	}
	
	.CheckoutHouse .ob-boxicon>img {
		display: block;
		width: .35rem;
		height: .35rem;
	}
	
	.CheckoutHouse .ob-left {
		background: #fff;
		color: #E25051;
	}
	
	.CheckoutHouse .ob-right {
		background: #E25051;
		color: #fff;
	}
</style>